<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/main.css"/>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/main.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">

    <jsp:include page="/pages/common/header.jsp"/>
    <%--主体内容--%>
    <div class="layui-row center">
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
            <div class=center_category>
                <ul class="layui-nav layui-nav-tree layui-inline" lay-shrink="all"
                    style="margin-right: 10px;background: #797979">
                    <c:forEach var="firstCategory" items="${categories}">
                        <li class="layui-nav-item
                        ${clickCategory.parent !=null && clickCategory.parent.equals(firstCategory.id) ? "layui-nav-itemed" : ""}">
                            <a href="javascript:${firstCategory.children==null ? "menu_click(0)":""};"
                               style="background: #797979;">${firstCategory.title}</a>
                            <c:if test="${firstCategory.children!=null}">
                                <dl class="layui-nav-child">
                                    <c:forEach var="secondCategory" items="${firstCategory.children}">
                                        <dd>
                                            <a href="javascript:menu_click('${secondCategory.id}');"
                                               style="background:#8F908E;">${secondCategory.title}</a>
                                        </dd>
                                    </c:forEach>
                                </dl>
                            </c:if>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
            <div class=center_product id="center_body">
                <div class="product_nav">
                    <div class="product_nav_breadcrumb">
                        当前路径：<p id="categoryId" style="display: none;">${clickCategory.id}</p>
                        <span class="layui-breadcrumb">
                              <a id="breadcrumb_1">${clickCategory.parentPojo.categoryName}</a>
                              <a><cite id="breadcrumb_2">${clickCategory.categoryName}</cite></a>
                        </span>
                    </div>
                    <div class="product_nav_search">
                        <p>筛选：</p>
                        <label class="product_nav_search_div">
                            价格
                            <input id="min_price" class="layui-input" type="text" title="" placeholder="最低"
                                   value="${productCondition.minPrice}">
                            &nbsp;&nbsp;-
                            <input id="max_price" class="layui-input" type="text" title="" placeholder="最高"
                                   value="${productCondition.maxPrice}">
                        </label>
                        <div class="layui-inline product_nav_search_div" style="width: 30%">
                            <label class="layui-form-label" style="padding: 0;">日期范围</label>
                            <div class="layui-input-inline" style="width: 50%;">
                                <input type="text" class="layui-input" id="releaseTime_range"
                                       style="height: 80%;    margin-top: -0.4%;margin-left: 14px"
                                       value="${productCondition.releaseTimeRange}"
                                       placeholder="发布时间范围" title="">
                            </div>
                        </div>
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="product_search()">确定</button>
                    </div>
                </div>
                <div class="product_body" id="product_body">
                    <c:forEach items="${products}" var="product">
                        <div class="product_item" onclick="product_detail('${product.id}')">
                            <img src="${product.img}" alt="">
                            <p style="color:red;font-size: 13px;">${product.price}</p>
                            <p>${product.name}</p>
                            <div style="display: flex">
                                <p style="display: block;width: 65%">${product.stringReleaseTime}</p>
                                <p style="display: block;width: 35%;color:#fff9ec;font-size: 10px; padding: 1px;
                                        background:${product.releaseUserPojo.id.equals(sessionScope.user.id) ? "mediumseagreen" : "deepskyblue"};text-align: center">
                                        ${product.releaseUserPojo.id.equals(sessionScope.user.id) ? "我的" : product.releaseUserPojo.realName}
                                </p>
                            </div>
                        </div>
                    </c:forEach>
                </div>
                <div class="product_page" id="productPage"></div>
            </div>
        </div>
    </div>

    <%@include file="/pages/common/footer.jsp" %>

</div>
<script>
    let curPage = ${curPage};
    let categoryId = $("#categoryId").text();

    var element = null;
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        element = layui.element;
    });

    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    layui.use('laypage', function () {
        let laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'productPage' //注意，这里的 test1 是 ID，不用加 # 号
            , count: ${products_num} //数据总数，从服务端得到
            , limit: 16
            , curr: curPage //获取起始页
            , jump: function (obj, first) {
                //首次不执行
                let minPrice = $("#min_price").val();
                let maxPrice = $("#max_price").val();
                let searchContent = $("#search_input").val();
                minPrice = parseFloat(minPrice);
                maxPrice = parseFloat(maxPrice);
                let releaseTimeRange = $("#releaseTime_range").val();
                if (!first) {
                    sendJsonParam(categoryId, obj.curr, minPrice, maxPrice, searchContent, releaseTimeRange);
                }
            }
        });
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#releaseTime_range'
            , range: true
        });
    });

    //商品筛选事件
    function product_search() {
        let minPrice = $("#min_price").val();
        let maxPrice = $("#max_price").val();
        let releaseTimeRange = $("#releaseTime_range").val();

        if (minPrice !== "" && maxPrice !== "")
            if (!/^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,2})$)|^(([1-9]+)$)/.test(minPrice)
                || !/^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,2})$)|^(([1-9]+)$)/.test(maxPrice)) {
                layer.msg("请输入正确的价格", {
                    icon: 2,
                    time: 1000
                });
                return false;
            }

        if (releaseTimeRange !== "" && !/\d{4}-\d{2}-\d{2} - \d{4}-\d{2}-\d{2}/.test(releaseTimeRange)) {
            layer.msg("不是正确的日期范围", {
                icon: 2,
                time: 1000
            });
            return false;
        }

        minPrice = parseFloat(minPrice);
        maxPrice = parseFloat(maxPrice);

        sendJsonParam('${clickCategory.id}', curPage, minPrice, maxPrice, null, releaseTimeRange);
    }

</script>
</body>
</html>
